Vue.component("login",{
    //元素内容必须是单根节点
    template : `
    <span>
        <slot name="nologin" v-if="user==null">
            <a href="#" @click.prevent="showLogin=true">登录</a>
            <a href="#" @click.prevent="showRigister=true">注册</a>
            <a href="#" @click.prevent="showForget=true">忘记密码</a>
        </slot>
        <slot name="logined" v-else :user="user" :prop="prop">
            欢迎 {{user[prop.nameColumn]}}
            <a href="#" @click.prevent="showSetPwd=true">修改密码</a>
            <a href="/login/logout">退出</a>
        </slot>
        
<el-dialog title="登录窗口" :visible.sync="showLogin">
  <el-form >
    <el-form-item label="账号" :label-width="100">
      <el-input v-model="form.username" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="密码" :label-width="100">
      <el-input v-model="form.password" autocomplete="off"></el-input>
    </el-form-item>
<el-form-item label="验证码:" label-width="80px">
<div style="display: flex; gap: 5px" >
<el-input v-model="form.vcode" autocomplete="off" placeholder="验证码" style="flex: auto"></el-input>
<img :src="vcodeImage" @click="refreshVcode" style="width: 200px; cursor: pointer">
</div>

</el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="showLogin = false">取 消</el-button>
    <el-button type="primary" @click="login">确 定</el-button>
  </div>
</el-dialog>

        <el-dialog title="忘记密码窗口" :visible.sync="showForget">
          <el-steps :active="forgetActive" finish-status="success">
              <el-step title="步骤 1: 发送验证邮件"></el-step>
              <el-step title="步骤 2: 重置密码"></el-step>
          </el-steps>
          <div v-if="forgetActive==0" style="height: 100px; text-align: center">
                <el-input v-model="form1.username" placeholder="请输入您账号"></el-input><br>
                <el-button @click="forget()">发送验证码</el-button>
          </div>
          <div v-else-if="forgetActive==1" style="height: 100px; text-align: center">
                <el-input v-model="form1.vcode" placeholder="请输入验证码"></el-input><br>
                <el-input v-model="form1.pwd" placeholder="请输入新密码"></el-input><br>
                <el-input v-model="form1.rePwd" placeholder="请输入确认密码"></el-input><br>
                <el-button @click="resetPwd()">重置密码</el-button>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="showForget = false">取 消</el-button>
          </div>
        </el-dialog>
        
        <el-dialog title="注册窗口" :visible.sync="showRigister" style="height: auto">
  <el-form >
    <el-form-item label="账号" :label-width="100">
      <el-input v-model="form2.username" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="密码" :label-width="100">
      <el-input v-model="form2.password" autocomplete="off"></el-input>
    </el-form-item>
        <el-form-item label="邮箱" :label-width="100">
      <el-input v-model="form2.email" autocomplete="off"></el-input>
    </el-form-item>
    <el-from-item label="验证码" :label-width="100">
      <el-input v-model="form2.vcode" autocomplete="off"></el-input>
      <el-button @click="sendVcode()">发送验证码</el-button>
    </el-from-item>
    <el-form-item>
    <el-upload
  class="avatar-uploader"
  action="/upload/upload"
  :show-file-list="false"
  :on-success="uploadSuccess"
  :data="{type:'image'}"
  >
  <img v-if="form2.head" :src="form2.head" style="width: 200px;height: 200px">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
    
  </el-form>
  <div slot="footer" class="dialog-footer">
    
    <el-button @click="showRigister = false">取 消</el-button>
    <el-button type="primary" @click="rigister">确 定</el-button>
  </div>
</el-dialog>
        
        <el-dialog title="修改密码窗口" :visible.sync="showSetPwd">
  <el-form >
    <el-form-item label="用户名" :label-width="100">
      <el-input v-model="form3.name" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="老密码" :label-width="100">
      <el-input v-model="form3.oldpwd" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="新密码" :label-width="100">
      <el-input v-model="form3.newpwd" autocomplete="off"></el-input>
    </el-form-item>
        <el-form-item label="确认密码" :label-width="100">
      <el-input v-model="form3.repwd" autocomplete="off"></el-input>
    </el-form-item>
<el-form-item label="验证码:" label-width="80px">
<div style="display: flex; gap: 5px" >
<el-input v-model="form3.vcode" autocomplete="off" placeholder="验证码" style="flex: auto"></el-input>
<img :src="vcodeImage" onclick="refreshVcode" style="width: 200px; cursor: pointer">
</div>

</el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="showSetPwd = false">取 消</el-button>
    <el-button type="primary" @click="setPwd">确 定</el-button>
  </div>
</el-dialog>
        
    </span>
    `,
    props:["route"],
    data(){
        return {
            user : null,
            prop: {},
            showLogin: false,
            showForget:false,
            form: {username:"",password:"",vcode:""},
            forgetActive: 0,
            form1: {username:"",vcode:"",pwd:"",rePwd:""},
            showRigister: false,
            form2: {username:"",password:"",email:"",vcode:"",head:""},
            form3: {name:"",oldpwd:"",newpwd:"",repwd:"",vcode:""},
            showSetPwd: false,
            vcodeImage: this.route + "/vcode/image",
        }
    },
    created(){
        this.route = this.route || '';
        axios.get(this.route + "/login/props").then(res=>{
            this.prop = res.data;
            axios.get(this.route + "/login/myinfo").then(res=>{
                if(res.data.code == 1){
                    this.$emit("logined",res.data.data);
                }else{
                    this.$emit("logined",null);
                }
                this.user = res.data.data;
            });
        });
    },
    methods: {
        login(){
            axios.get(this.route + "/login/login",{
                params: this.form
            }).then(res=>{
                if(res.data.code == 1){
                    this.$message(res.data.msg);
                    this.showLogin = false;
                    this.user=res.data.data;
                    this.$emit("logined",res.data.data);
                }else{
                    this.$alert(res.data.msg);
                }
            })
        },
        refreshVcode() {
            this.vcodeImage = this.route + "/vcode/image?" + new Date().getTime();
        },
        forget(){
            axios.get(this.route + "/login/forget?username=" + this.form1.username).then(res=>{
                if(res.data.code == 1){
                    this.forgetActive=1;
                }else{
                    this.$alert(res.data.msg);
                }
            })
        },

        resetPwd(){
            axios.get(this.route + "/login/resetPwd",{
                params:this.form1
            }).then(res=>{
                if(res.data.code == 1){
                    this.$message(res.data.msg);

                }else{
                    this.$alert(res.data.msg);
                }
            })
        },

        rigister(){
            axios.get(this.route + "/login/register",{
                params:this.form2
            }).then(res=>{
                if(res.data.code == 1){
                    this.$message(res.data.msg);
                    this.showRigister = false;
                }else{
                    this.$alert(res.data.msg);
                }
            })
        },

        sendVcode(){
            axios.get(this.route + "/login/sendVcode?email=" + this.form2.email).then(res=>{
                if(res.data.code == 1){
                    this.$message(res.data.msg);
                }else{
                    this.$alert(res.data.msg);
                }
            })
        },

        uploadSuccess(res,file){
            if(res.code==1){
                this.form2.head =res.data;
            }else{
                this.$alert("图片上传失败");
            }
        },

        setPwd(){
            axios.get(this.route + "/login/setPwd",{
                params:this.form3
            }).then(res=>{
                if(res.data.code == 1){
                    this.$message(res.data.msg);

                }else{
                    this.$alert(res.data.msg);
                }
            })
        }

    }
})
